<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Event Hover</title>
<script src="../lib/jquery-2.1.1.js"></script>
<script>
var cnt = 0;
$(document).ready(function(){
	$('#div1').css({
		'border' : '1px dashed #01DF74',
		'width' : '100px',
		'padding' : '20px',
		'text-align' : 'center'
	});
	
	$('#div1').hover( // mouse 가 over 됐을 때,
		function(){
			$(this).css({
				'background-color' : '#eeeeee',
				'box-shadow' : '2px 2px 15px #888888',
				'cursor' : 'pointer'
			});
			
		},
		function(){  // mouse 가 out 됐을 때,
			$(this).css({
				'background-color' : '',
				'box-shadow' : '',
				'cursor' : ''
			});
		}
	);
	
	// keydow event 처리를 위해서
	$('#mid').keyup(function(ev){
		var str = "KEY CODE : " + ev.keyCode;
		// 길이 잴때, var str = $(this).val().length; 
		$('#result').text(str);
		
		if((ev.keyCode < 65 || ev.keyCode > 90 ) && ev.keyCode != 8 && ev.keyCode != 32){
			var temp = $('#mid').val();
			temp = temp.substring(0, temp.length - 1);
			$('#mid').val(temp);
		}
	
	});
	
	// Trigger event 처리
	$('#btnTrigger').click(chk);
	$('#btnTrigger').trigger('click');
	
});
function chk(){
	cnt ++;
	$('#result').text('클릭 이벤트 발생!!! -------> ' + cnt + '번');
}
</script>
</head>
<body>

<div id='div1'>Event Hover</div>

<input type="text" id='mid' autocomplete="off">
<div id="result"></div>

<input type="button" value="자동클릭" id="btnTrigger">
</body>
</html>